<template>
  <view>
    <view class="t-a-c f-w f-s-20 m-b-30">
      话题分类
    </view>
    <!-- 内容切换 -->
    <scroll-view scroll-x="true" :scroll-into-view='scrollInto' scroll-with-animation="true">
      <view class="check-box flex-b">
        <view style="flex: 0 0 auto;" :id="'tab'+index"
          :class="['item',check_active_index===index?'active':'','f-w','f-s-14','t-a-c','l-h-100']"
          v-for="(item,index) in check_list" hover-class="animate__animated animate__heartBeat"
          @click="checkActive(index)">{{item}}</view>
      </view>
    </scroll-view>
    <!--主体内容 -->
    <view class="text-box">
      <swiper style="height: 1020rpx; " :current="check_active_index" @change="messageChange">
        <swiper-item class="swiper-item" v-for="(item,index) in check_list" :key="index">
          <scroll-view @scrolltolower="ReachBottom" style="height: 1020rpx;" class="m-l-30" scroll-y="true">
            <block v-for="(item1,index1) in updateList" :key="index1">
              <topic @click.native="goTopicDetail(item1)" :item="item1"></topic>
            </block>
            <view class="grey-light-bg-color t-a-c l-h-80" style="height: 80rpx;">已经到底了</view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        check_list: ['关注', '推荐', '体育', '热点', '财经', "生活", "美女", "黄色", "蓝天", "白云", "你哈"],
        check_active_index: 0,
        scrollInto: 'tab0',
        updateList: [{
            name: '刘亦菲',
            image: '/static/default.png',
            desc: '话题描述',
            all: 999,
            today: 5
          },
          {
            name: '冯凯隆',
            image: '/static/default.png',
            desc: '话题描述',
            all: 999,
            today: 10
          },
          {
            name: '话题名称哈哈哈',
            image: '/static/default.png',
            desc: '话题描述',
            all: 42,
            today: 0
          },
          {
            name: '话题名称',
            image: '/static/default.png',
            desc: '话题描述',
            all: 42,
            today: 0
          },
          {
            name: '刘亦菲',
            image: '/static/default.png',
            desc: '话题描述',
            all: 999,
            today: 5
          },
          {
            name: '冯凯隆',
            image: '/static/default.png',
            desc: '话题描述',
            all: 999,
            today: 10
          },
          {
            name: '话题名称哈哈哈',
            image: '/static/default.png',
            desc: '话题描述',
            all: 42,
            today: 0
          },
          {
            name: '话题名称',
            image: '/static/default.png',
            desc: '话题描述',
            all: 42,
            today: 0
          }
        ]
      };
    },
    methods: {
      checkActive(index) {
        this.check_active_index = index
        this.scrollInto = "tab" + index
      },
      // 轮播图滚动
      messageChange(e) {
        this.check_active_index = e.detail.current
        this.scrollInto = "tab" + e.detail.current
        //发送请求
      },
      // scroll-view的下拉刷新，要进行节流阀控制
      ReachBottom() {
        console.log(123)
      },
      goTopicDetail(item) {
        uni.navigateTo({
          url: "subpkg/topic-detail/topic-detail?id=" + 1,
        })
      }
    },
    // 下拉刷新
    onPullDownRefresh() {
      console.log(123)
    }
  }
</script>

<style lang="scss">
  .check-box {
    padding: 0rpx 20rpx;
    width: 94%;

    .item {
      width: 100rpx;
      height: 100rpx;
    }

    .active {
      color: #FD587B;
      font-size: 18px;
    }
  }

  .text-box {
    .text-item {
      border-top: 16rpx solid #F5F5F5;
    }
  }

  .text-buttom {
    width: 100%;
    height: 70rpx;
  }
</style>